﻿ 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../../themes/css/ui.common.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/css/ui.child.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/css/ui.tips.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link id="skin_css" rel="stylesheet" type="text/css" href="../../themes/css/ui.c.blue.css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jQueryUI/jquery.ui.datepicker.js" type="text/javascript"></script>
    <script src="../../Scripts/jQueryUI/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
    <script src="../../Scripts/ui.admincp.js" type="text/javascript"></script>
    <script src="../../Scripts/ui.default.js" type="text/javascript" charset="UTF-8"></script>
    <script src="Scripts/ui.pagingHelper.js" type="text/javascript"></script>  
    <script src="HtmlEditor/kindeditor-min.js" type="text/javascript"></script>
    <script src="Scripts/HtmEditorCreator.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        
        .ui-news-title
        {
            background-color: #C8D6EF;
            cursor: hand;
            padding: 5px;
            text-align: right;
        }
        
        .ui-news-innerTitle
        {
            float: left;
            overflow: hidden;
        }
        
        .ui-news-content
        {
            text-indent: 26px;
            background-color: #CFDFF7;
            padding: 5px;
        }
        
        .ui-news-barnar
        {
        }
        
        .ui-news-entity
        {
            border-bottom: 1px dashed #EFFBF5;
        }
        
        .ui-news-entity-title
        {
            padding: 5px;
            font-size: larger;
        }
        
        #ui-news-latestList
        {
            width: 500px;
        }
    </style>
    <script type="text/javascript">
        var count = 1;
        $(function () {
            var opt = {
                pageBarId: "#pp",
                postUrl: "noticelist!query.action",
                searchArg: function (pageNo, pageSize) {
                    return { pageNo: pageNo, pageSize: pageSize };
                },
                pageNo: 1,
                pageSize: 10,
                callBack: function (data) {
                    alert("fad:" + data);
                }
            };
            initializePager(opt);
            $(".ui-news-title").click(function () {
                $(this).next(".ui-news-content").slideToggle();
            });
 
        });

  
         
    </script>
</head>
<body>
    <div>
        <div>
            页面上基本用引用的 css 和 js 包含:</div>
        <div>
            复制本页的 head 部分的内容.
        </div>
        <ul>
            <li>button 的样式, 在需要应用样式的 元素上的class 加上 "ui-button" </li>
            <li>需要选择日期的控件,在 input type = text 的元素 的 class 加入 NeedDate ,同事确保页面引用了:<br />
                &lt;script src="../../Scripts/jQueryUI/jquery.ui.datepicker.js" type="text/javascript"&gt;&lt;/script&gt;
                &nbsp;&lt;script src="../../Scripts/jQueryUI/jquery.ui.datepicker-zh-CN.js" type="text/javascript"&gt;&lt;/script&gt;
                <div>
                    <input type="text" class="NeedDate" />
                    <br />
                    <button class="ui-button">
                        Button1</button>
                    <a href="#" class="ui-button">Button2 from &lt;a&gt;</a>
                    <input type="button" class="ui-button" value="Button3 from Input " />
                </div>
            </li>
            <li>需要富文本编辑器, 在 &lt;textarea/&gt; 元素的class 加入 "ui-text-editor": , <span class="red-tips">
                确保引用了 &lt;script src="HtmlEditor/kindeditor-min.js" type="text/javascript"&gt; &lt;/script
                &gt; </span>
                <br />
                <textarea id="tt1" class="ui-text-editor" style="width:460px; height:340px;">content</textarea>
            </li>
            <li>未完待续...</li>
        </ul>
    </div>
    <div id="ui-news-latestList" class="hiddenObject">
        <span class="ui-news-entity-title">近期新闻</span>
        <div class="ui-news-entity">
            <div class="ui-news-title" title="展开/关闭详情..">
                <span class="ui-news-innerTitle">新闻标题1</span><span class="ui-news-barnar" title="发布时间">2011-4-22
                    15:34</span>
            </div>
            <div class="ui-news-content">
                奧巴馬總統是否在美國出生的話題，近日再度成為共和黨人士的討論焦點,雖然大多數美國人都相信奧巴馬是在夏威夷出生,並認為對此提出質疑是荒謬絶倫的事情,
                <br />
                但仍無阻某些共和黨人繼續就此事大造文章,有意在2012年出馬競選總統的紐約地産富豪川普,便公然要求奧巴馬公開他的原始出生證明,又聲言已派調查員到夏威夷,務求要查個水落石出,而亞利桑那州州議會更通過立法,要求今後競選總統的候選人,必須出示在美國出世的證明檔案,但有關法案最終被州長否決。
            </div>
        </div>
        <div class="ui-news-entity">
            <div class="ui-news-title" title="展开/关闭详情..">
                <span class="ui-news-innerTitle">新闻标题2</span><span class="ui-news-barnar" title="发布时间">2011-4-22
                    15:34</span>
            </div>
            <div class="ui-news-content">
                新华社报道...
            </div>
        </div>
        <div id="Searchresult">
            Showing search results 1-10 ...
        </div>
        <div id="Pagination" class="pagination">
        </div>
        <div id="pp" style="background: #efefef; border: 1px solid #ccc;">
        </div>
        <button id="SearchButton">
            Search</button>
    </div>
</body>
</html>
